import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Toast,
  Flex,
  Icon,
  Checkbox,
  NoticeBar
} from 'antd-mobile';
import { routerRedux } from 'dva/router';
//import SearchBarMy from '../../components/SearchBar/SearchBar';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';
import RecommendGoods from "../../components/RecommendGood/RecommendGoods";
import MyScroll from '../../components/MyScroll/MyScroll';
import CartTitle from "./cartTitle"
import CartBottom from './cartBottom';
import CartShop from './CartShop';
import { cartAll,CART } from './cart.less';
import notice from '../../assets/svg/notice.svg';

const AgreeItem = Checkbox.AgreeItem;

class Cart extends Component {
  constructor(props) {
    super(props);
      this.state = {
          visible:true
      };
  }



  gotoBuy = () => {

  }


  delCart = (goods) => {
      const cartId = [];
      this.state.cartList.forEach(shop => {
          shop.list.forEach(goods => {
              if (goods.checked) {
                  cartId.push(goods.cartId);
              }
          });
      });
      if (cartId.length == 0) {
          Toast.info('请先选择商品', 1);
      }
    // cartApi.deleteCart({ cartId: goods.cartId }).then(result => {
    //   if (result.result == 1) {
    //     this.refreshCartList();
    //   }
    // });
  }

  // 领券
  //getCoupon = () => {
    // storeApi.couponlist({
    //   storeId: store.storeId,
    // }).then(result => {
    //   const data = result.data;
    //   if (data && data.length > 0) {
    //     const onMaskClose = () => {
    //       console.log('关闭遮罩');
    //     };
    //     Popup.show(<CouponItem
    //       storeId={store.storeId}
    //       couponList={data}
    //       onClose={() => Popup.hide()}
    //     />, { animationType: 'slide-up', onMaskClose });
    //   } else {
    //     Toast.info('暂无优惠券可领券', 1);
    //   }
    // });
 // }
    // componentWillUnmount

  render() {
    const { dispatch, cart } = this.props;
    console.log(this.props)
    const { cartIds, couponMessage, couponList, editStatus,list } = cart;
      return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                  className={CART}
                //justify="between" alignContent="stretch"
            >
                <CartTitle cartIds={cartIds}></CartTitle>

                {
                    this.state.visible == true && couponMessage != "" ?
                    <NoticeBar
                        mode="link"
                        icon={<Icon type={notice.id} size="xxs" />}
                        style={{ width:'100%', backgroundColor:'#47B4F9', color:"#fff",height:'1rem'}}
                        marqueeProps={{ loop: true, style: { padding: '0 .075rem' } }}

                        action={
                            <Icon
                            onClick={()=>{
                              this.setState({
                                visible:false
                              })
                            }}
                            type="cross"
                            />
                        }

                    >
                         {couponMessage}
                    </NoticeBar> : ""
                }

                <MyScroll>
                   <div style={this.state.visible == true && couponMessage != "" ? {} : { marginTop:"-0.2rem" } } className={cartAll}>
                       {
                           cartIds.map((shop, index) => {
                               // console.log(shop)
                               return (
                                   <CartShop
                                       editStatus={editStatus}
                                       key={index}
                                       data={shop}
                                       dispatch={dispatch}
                                       index={index}
                                       couponList={couponList}
                                       leftMoveSelect={this.leftMoveSelect}
                                   ></CartShop>
                               );
                           })
                       }
                   </div>
                    {
                        cartIds==""?<div className="kong"><span style={{position:"absolute",bottom:"0",left:"20%",fontSize:".3rem"}}>购物车还没有商品,<span style={{color:"#ff0036"}} onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname:`/`
                            }))
                        }}
                       >去添加商品吧!</span></span></div>:""
                    }
                    <RecommendGoods dispatch={ dispatch } data={list}></RecommendGoods>
                </MyScroll>
                {cartIds==""?"":<CartBottom ></CartBottom>}
                <NavBottomBar path="/cart" />
            </Flex>
       );
  }
}

export default connect(({ cart }) => ({ cart }))(Cart);
